<template>
  <ul class="bottom-navbar" v-if="navbarList.length > 0">
    <li v-for="item in navbarList" :key="item.id">
      <router-link :to="item.to">
        <ul class="bottom-navbar-item">
          <li class="bottom-navbar-item-img">
            <i class="iconfont" :class="item.class"></i>
          </li>
          <li class="bottom-navbar-item-desc">{{ item.title }}</li>
        </ul>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'BottomNavbar',
  data () {
    return {
      navbarList: [
        { id: 1, title: '电影', class: 'icon-dianying', to: '/films' },
        { id: 2, title: '影院', class: 'icon-yingyuan', to: '/cinemas' },
        { id: 3, title: '资讯', class: 'icon-zixun', to: '/news' },
        { id: 4, title: '我的', class: 'icon-wode', to: '/center' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-navbar {
  width: 100vw;
  height: 50px;
  z-index: 100;
  position: fixed;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .bottom-navbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .bottom-navbar-item-img i {
      height: 30px;
      line-height: 30px;
      font-size: 22px;
    }
    .bottom-navbar-item-desc {
      height: 16px;
      font-size: 12px;
      line-height: 16px;
    }
  }
  .router-link-active {
    color: #ff5f16; // 标签文本动态高亮，用 router-link 自带的 router-link-active 样式
  }
}
</style>
